
import tpl from './index.html'

export default {
    template: tpl,
    propTypes: {
        // 1、常用
        // 组件唯一默认对外双向绑定的数据
        value: {
            type: 'array',
            value: []
        },
        // 组件包裹层自定义行内样式
        style: {
            type: 'string',
            value: ''
        },
        // 2、更多
        options: {
            type: 'array',
            value: []
        }
    },
    data: function(){
        return {
            name: "组件名称",
            // 状态
            states: {
                
            },
            other: {

            }
        }
    },
    methods: {
        checkVal: function(index){
            var self = this;
            self.toggle('options.' + index + '.checked')
        }
    },
    filters: {
        
    },
    // 数据监听
    watchers: {
        "options.**": {
            watcher: function(newValue){
                var self = this;
                var options = self.get('options');
                var va = [];
                for(var i=0; i<options.length; i++){
                    if(options[i].checked){
                        va.push(options[i].val)
                    }
                }
                self.set('value', va);
            },
            sync: true
        },
        "value": {
            watcher: function(newValue){
                var self = this;
                var options = self.get('options');
                    for(var o=0; o<options.length; o++){
                        self.set('options.' + o + '.checked', false);
                        for(var i=0; i<newValue.length; i++){
                            if(options[o].val == newValue[i]){
                                self.set('options.' + o + '.checked', true);
                            }
                        }
                    }
            },
            sync: true
        }
    },
    computed: {
        // value: {
        //     deps: ['options', 'options.*.checked'],
        //     get: function () {
        //         // var list = this.get('list');
        //         // for (var i = 0, len = list.length; i < len; i++) {
        //         //     if (!list[i].checked) {
        //         //         return false;
        //         //     }
        //         // }
        //         // return len > 0;
        //     },
        //     set: function (value) {
        //         // var list = this.get('list');
        //         // var data = { };
        //         // for (var i = 0, len = list.length; i < len; i++) {
        //         //     data['list.' + i + '.checked'] = allChecked;
        //         // }
        //         // this.set(data);
        //     }
        // }
    },
    afterMount: function(){
        
    }
};